<template>
    <el-button @click="download" :text="elButtonIsText" :bg="elButtonIsBg" :type="elButtonType" :size="elButtonSize">
        {{ text }}
    </el-button>


    <el-dialog :append-to-body="true" width="650px" v-model="visible" title="批量更新钻孔" class="text-center dialog " style="border-radius: 10px;">
            <el-button type="primary" @click="exportBoreList">导出项目钻孔设计数据</el-button>

            <div class="w-100"  style="height: 130px;">
                <el-checkbox
                    class=" w-100 ms-5 "
                   
                    v-model="checkAll"
                    :indeterminate="isIndeterminate"
                    @change="handleCheckAllChange"
                    >全选</el-checkbox>

                <el-checkbox-group
                    class=" w-100 ms-5 "
                    v-model="checkedFields"
                    @change="handleCheckedFieldsChange">

                    <el-checkbox class="float-start"  v-for="field in fields" :key="field" :label="field">{{
                    field
                    }}</el-checkbox>
                </el-checkbox-group>

            </div>


            <div class="d-flex justify-content-center" >
            <el-upload  ref="upload" class="upload-demo w-75" v-model:file-list="fileList" drag action="#" accept=".xlsx" :auto-upload="false" 
             :limit="1" multiple>
            <el-icon class="el-icon--upload">
                <upload-filled />
            </el-icon>
            <div class="el-upload__text">
                拖拽文件或者<em>点击上传</em>
            </div>
            <template #tip>
                <div class="el-upload__tip">
                    选择要更新的字段
                </div>
            </template>
        </el-upload>


            </div>
            <div class="download-template">
            <el-button @click="visible = false">取 消</el-button>
            <el-button :loading="submitLoading" type="primary" @click="submitUpload">确 定</el-button>
        </div>


    </el-dialog>


</template>
    
<script setup lang='ts'>

import { ComponentInternalInstance, getCurrentInstance, onMounted, PropType, ref, watch } from 'vue'
import * as _ from 'lodash'
import { useDownload } from '@/hook/useDownload'
import { useExcelSurveyDataFields } from '@/hook/useExcelSurveyDataFields'
import API from '@/network/api';
import store from '@/store';
import { ElButton, ElDialog, ElIcon, ElMessage, ElUpload, genFileId, UploadFile, UploadFiles, UploadInstance, UploadProps, UploadRawFile } from 'element-plus';

const proxy: any = (getCurrentInstance() as ComponentInternalInstance).proxy
const { downloadUrl } = useDownload()

const { drillHoleExportFieldList,
    insituTestExportFieldList,
    sampleExportList,
    stratumExportFieldList,
    waterExportFieldList,
    deviceExcelFieldList } = useExcelSurveyDataFields()


const emits = defineEmits(['afterSubmit', "submitUpload"]);

const props = defineProps({
    text: {
        type: String,
        default: '批量更新钻孔'
    },

    elButtonIsText:{
        type:Boolean,
        default:false
    },
    elButtonIsBg:{
        type:Boolean,
        default:false
    },
    elButtonSize:{
        type:String as PropType<"" | "default" | "small" | "large">,
        default:"default"
    },
    elButtonType:{
        type:String as PropType<"" | "default" | "primary" | "success" | "warning" | "info" | "danger" | "text">,
        default:"default"
    },

    templateUrl:{
        type:String,
        default:""
    }

})


// 数据相关vo
let dataVo = {


}


const visible = ref(false)

const download = () => {
    visible.value = true;
}



const exportBoreList = async () => {
    let res:any = await API.excel.exportBoreList({id:store.getters["getProjectId"]});
    window.location.href = store.getters['getOssUrlPrefix'] + res.singleData;
}

const fileList = ref([])
const checkAll = ref(false)
const isIndeterminate = ref(true)
const checkedFields = ref(['钻孔类型', ])
const fields = ['钻孔类型', '设计深度', '位置','钻孔性质','钻孔偏差深度','钻孔偏差距离','设计要求'];

const handleCheckAllChange = (val: boolean) => {
  checkedFields.value = val ? fields : []
  isIndeterminate.value = false
}
const handleCheckedFieldsChange = (value: string[]) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === fields.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < fields.length
}


const submitLoading = ref(false)


const submitUpload = _.debounce(async () => {

    console.log(checkedFields.value);

    let tempFileList: UploadFiles = fileList.value
    var formData = new FormData();
    formData.append("file", tempFileList[0].raw as UploadRawFile)
    formData.append("filename", tempFileList[0].name)
    formData.append("projectId",store.getters["getProjectId"])
    formData.append("epsg", store.getters["getEPSG"]);

    formData.append("checkedFields", JSON.stringify(checkedFields.value));

    console.log("formData",formData);
    emits("submitUpload",formData);
    visible.value = false;


}, 300)

</script>
    
<style scoped>
.custom-tree-node-container>>>.is-penultimate .el-tree-node__children {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.custom-tree-node-container>>>.is-penultimate .el-tree-node__children div {
    width: 16%;
}

.download-template {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}


.dialog{
    border-radius: 10px;
}
</style>